<template>
  <div class="wrapper">
    <div class="toptab">
      <span class="span">嗨聊校园论坛<i class="el-icon-chat-line-round"></i></span>
      <div class="menu"> 
        <el-menu
  :default-active="$route.path"
  router
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#ccc"
  active-text-color="#ffd04b">
  <el-menu-item index="/tu1" key="/tu1"><i class="el-icon-s-home"></i>首页</el-menu-item>
  <el-menu-item index="/tu2" key="/tu2" ><i class="el-icon-question"></i>问题</el-menu-item>
  <el-menu-item index="/tu3" key="/tu3" ><i class="el-icon-s-order"></i>帖子</el-menu-item>
  <el-menu-item index="/tu4" key="/tu4"><i class="el-icon-magic-stick"></i>思绪</el-menu-item>
  <el-menu-item index="/tu5" key="/tu5"><i class="el-icon-s-promotion"></i>分享</el-menu-item>
  <el-menu-item index="/tu6" key="/tu6"><i class="el-icon-info"></i>公告</el-menu-item>

</el-menu>
        </div>

    <div class="search">
      <el-input placeholder="请输入内容"
     v-model="inputs" class="input-with-select" clearable>
    <el-button slot="append" icon="el-icon-search" @click="search(inputs)"></el-button>
  </el-input>
    </div>
   <div class="user">
  <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
 <div class="userimg"> 
   <el-avatar  shape="square" :size="30" :fit="img" :src="url"></el-avatar>
   </div>
    <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a" icon='el-icon-user-solid'>个人主页</el-dropdown-item>
    <el-dropdown-item command="b" icon='el-icon-s-tools'>设置</el-dropdown-item>
    <el-dropdown-item command="c" icon='el-icon-s-order'>签到</el-dropdown-item>
    <el-dropdown-item command="d" icon='el-icon-question'>问题反馈</el-dropdown-item>
    <el-dropdown-item command="e" divided>退出</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
   </div>
    <div class="tiez">
    <el-row> 
      <router-link :to="'/fatie'">
       <el-tooltip effect="dark" content="发帖" placement="bottom">
                    <el-button  type="info" icon="el-icon-message" circle></el-button>
                   </el-tooltip>
    </router-link>
 </el-row>
    </div>

    </div>
    <div class="content">
      
      <div class="con_text">
        <transition name="move" mode="out-in">
          <keep-alive Props="exclude">
            <router-view v-if="isRouterAlive">
            </router-view>
          </keep-alive>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  provide(){
    return{
      reload:this.reload
    }
  },
  data() {
    return {
      isRouterAlive:true,
      user:'',
     inputs:'',
     img:'fill',
     url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    };
  },
 
  mounted() {
    this.getData();
  },
  methods: {
    getData(){
    const code=sessionStorage.getItem("userCode");
    if(code==""||code==null){

      this.$alert('你还没有登录嘞！', '提示', {
        confirmButtonText: '确定',
          callback: action => {
            this.$router.replace('/');
          }
        });

    }else{
    this.user=this.$route.query.user
    console.log(sessionStorage.getItem("userUrl"));
    this.url=sessionStorage.getItem("userUrl")
    }
    },
    reload(){
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true
        });
    },

    handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      search(val){
        this.inputs=''
       this.$emit('getData')
        this.$router.push({path:'/tu7',name:'tu7',
        query:{
          inputContent:val
          }})
      },
      //下拉菜单
      handleCommand(command) {
        // this.$message('click on item ' + command);
        if(command=='a'){
           this.$router.push('/userindex')
        }
          if(command=='b'){
           this.$router.push('/edit')
        }
        if(command=='e'){
            sessionStorage.setItem("userName", "");
            sessionStorage.setItem("userCode", "");
            sessionStorage.setItem("userUrl", "");
           this.$router.replace('/')
        }
        if (command=='d') {
          //  this.$router.go(0)
        this.$router.replace({path:'/contents',
        query:{
          inviteCode:'10'
          }})
          
        }
      }
     
  }
};
</script>
<style>
html,
body,
#app,
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
}
</style>

<style scoped>
.toptab {
  height: 60px;
  top: 0;
  /* position: absolute; */
  width: 100%;
  line-height: 60px;
  background-color: #545c64;
  box-shadow: 5px 3px 2px #ccc;
}
.toptab .span{
  left: 30px;
  position: absolute;
  font-family: "Hiragino Sans GB";
  font-size: 22px;
  color: #ccc;
}

.menu{
  left: 250px;
  position: absolute;
  height: 60px;
}

.content {
  width: 100%;
  overflow-x: hidden;
  /* overflow-y: auto; */
  position: absolute;
  top: 60px;
  box-sizing: border-box;
  /* height: 100%; */
}
.search{
    right: 150px;
    position: absolute;
    height: 60px;
    line-height: 60px;
    padding-left: 70px;  
}
  .el-input {
    width:280px;
  }
  .el-input-group__prepend {
    background-color: #ccc;
  }

.tiez{
  right: 70px;
  position: absolute;
}

  .user{
    right: 0;
    position: absolute;
    height: 60px;
    font-size: 12px;
  }

.userimg{
  padding-top: 10px;
    padding-right: 20px;
    height: 60px;
    line-height: 60px;
}
  
</style>


